<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div >
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>基础数据</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">企业备案信息</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <div>
          <el-row style=" height: 46px">
              <el-col :span="5" style="margin-left: 20px">
              <el-form-item label="创建时间" size="small">
                <el-date-picker clearable v-model="form.startDateTime"  type="date" placeholder="选择开始时间" style="width: 100%"/>
              </el-form-item>
            </el-col>
            <span>-</span>
            <el-col :span="4">
              <el-form-item label="" size="small">
                <el-date-picker clearable v-model="form.endDateTime" type="date" placeholder="选择结束时间" style="width: 96%"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="margin-left: 20px;">
              <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
              <el-button size="small" class="empty-but" icon="refresh" @click="onReset">重置</el-button>
              <el-button size="small" icon="plus" class="add-but" @click="addDialog = true">新增</el-button>
            </el-col>
          </el-row>
        </div>
        <div style="height: 10px; display: flex; align-items: center;background:#f2f4f5;margin-left:-20px;margin-right:-19.5px">
        </div>
        <div>
          <el-table :data="tableData" style="width: 100%" height="460">
            <el-table-column align="center" type="index" label="序号" width="60px"/>
            <el-table-column align="center" prop="enterprise_code" label="企业编号" show-overflow-tooltip />
            <el-table-column align="center" prop="enterprise_name"  label="企业名称" show-overflow-tooltip/>
            <el-table-column align="center" prop="enterprise_social_credit_code" width="180px" label="统一社会信用代码" show-overflow-tooltip/>
            <el-table-column align="center" prop="enterprise_area"  label="所属地区" show-overflow-tooltip />
            <el-table-column align="center" prop="enterprise_corp"  label="法人代表" show-overflow-tooltip />
            <el-table-column align="center" prop="enterprise_linkman" label="联系人" show-overflow-tooltip />
            <el-table-column align="center" prop="enterprise_phone"  label="联系电话" show-overflow-tooltip />
            <el-table-column align="center" prop="enterprise_site" label="企业地址" show-overflow-tooltip/>
            <el-table-column align="center" prop="create_time" label="创建时间" width="180px"
            :formatter="function(row,column){ if(row.create_time){ return $moment(row.create_time).format('YYYY-MM-DD HH:mm:ss')  }else{  return '' }}" />
            <el-table-column align="center" fixed="right" label="操作"  width="90" >
              <template #default="scope">
              <el-button link type="primary" icon="edit" size="small"  @click="updateDetail(scope.row)">修改</el-button>
              </template>
            </el-table-column>
            </el-table>
        </div>
      </el-main>
    </el-container>
    <!--新增弹出框-->
<el-dialog v-model="addDialog" title="新增企业信息" width="50%">
    <div style="width: 90%">
        <el-form  ref="ruleFormRef" :model="form" status-icon :rules="rules" label-width="160px" class="demo-ruleForm">
            <el-form-item label="企业编号" prop="enterprise_code">
                <el-input clearable v-model="form.enterprise_code" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
             <el-form-item label="企业名称" prop="enterprise_name">
                <el-input clearable v-model="form.enterprise_name" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
             <el-form-item label="统一社会信用代码" prop="enterprise_social_credit_code">
                <el-input clearable v-model="form.enterprise_social_credit_code"  style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属地区" prop="enterprise_area">
                <el-input clearable v-model="form.enterprise_area" style="width:300px" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="法人代表" prop="enterprise_corp">
                <el-input clearable v-model="form.enterprise_corp" style="width:300px" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="联系人" prop="enterprise_linkman">
                <el-input clearable v-model="form.enterprise_linkman" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系电话" prop="enterprise_phone">
                <el-input clearable v-model="form.enterprise_phone" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="企业地址" prop="enterprise_site">
                <el-input clearable v-model="form.enterprise_site" style="width:300px" placeholder="请输入" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="add(form)"> 确定 </el-button>
          <el-button class="empty-but" @click="addDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
    <!--修改弹出框-->
<el-dialog v-model="updateDialog" title="修改企业信息" width="50%">
    <div style="width: 90%">
        <el-form  ref="ruleFormRefUpdate" :model="obj" status-icon :rules="rules" label-width="160px" class="demo-ruleForm">
            <el-form-item label="企业编号" prop="enterprise_code">
                <el-input clearable v-model="obj.enterprise_code" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
             <el-form-item label="企业名称" prop="enterprise_name">
                <el-input clearable v-model="obj.enterprise_name" style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
             <el-form-item label="统一社会信用代码" prop="enterprise_social_credit_code">
                <el-input clearable v-model="obj.enterprise_social_credit_code"  style="width:300px" placeholder="请输入" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属地区" prop="enterprise_area">
                <el-input clearable v-model="obj.enterprise_area" style="width:300px" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="法人代表" prop="enterprise_linkman">
                <el-input clearable v-model="obj.enterprise_linkman" style="width:300px" placeholder="请输入"/>
            </el-form-item>
            <el-form-item label="联系人" prop="enterprise_corp">
                <el-input clearable v-model="obj.enterprise_corp" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="联系电话" prop="enterprise_phone">
                <el-input clearable v-model="obj.enterprise_phone" style="width:300px" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="企业地址" prop="enterprise_site">
                <el-input clearable v-model="obj.enterprise_site" style="width:300px" placeholder="请输入" />
            </el-form-item>
        </el-form>
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button class="sele-but" @click="update(obj)"> 确定 </el-button>
          <el-button class="empty-but" @click="updateDialog = false">取消</el-button>
        </span>
      </template>
</el-dialog>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {insertEnterpriseFiling, selectEnterpriseFiling, updateEnterpriseFiling} from "@/api/BasicAccessAudit";
import moment from "moment";
import {ElMessage} from "element-plus";
const router = useRouter()
const tableData = ref([]);
const form = reactive({})
onMounted(() => {
  selectAll();
});
// //查询所有
const selectAll = () => {
  selectEnterpriseFiling({}).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;
    } else {
    }
  });
};
//搜索查询
const selectQuery = () => {
  if(form.startDateTime){
    form.startDateTime = moment(form.startDateTime).format('YYYY-MM-DD HH:mm:ss')
  }else{
    form.startDateTime = ''
  }
  if(form.endDateTime){
    form.endDateTime = moment(form.endDateTime).format('YYYY-MM-DD HH:mm:ss')
  }else{
    form.endDateTime=  ''
  }
  selectEnterpriseFiling(form).then((res) => {
    if (res.code == 200) {
      tableData.value = res.data.list;
    } else {
    }
  });
};
// 重置
const onReset = () => {
  form.startDateTime = "";
  form.endDateTime = "";
  selectQuery()
};
// 校验
const rules = {
  enterprise_code: [{
    required: true,
    message: "请填写企业编号",
    trigger: "blur",
  }],
  enterprise_name: [{
    required: true,
    message: "请填写企业名称",
    trigger: "blur",
  }],
  enterprise_social_credit_code: [{
    required: true,
    message: "请填写统一社会信用代码",
    trigger: "blur",
  }],
  enterprise_area: [{
    required: true,
    message: "请填写所属地区",
    trigger: "blur",
  }],
  enterprise_linkman: [{
    required: true,
    message: "请填写法人代表",
    trigger: "blur",
  }],
  enterprise_corp: [{
    required: true,
    message: "请填写联系人",
    trigger: "blur",
  }],
  enterprise_phone: [{
    required: true,
    message: "请填写联系电话",
    trigger: "blur",
  },{
    max:11,
    message: '电话号码最大长度为11位',
    trigger: 'blur'
  },{
    pattern:/^1\d{10}$/,
    message: '请填写正确的电话号码',
    trigger: 'blur'
  }],
  enterprise_site: [{
    required: true,
    message: "请填写企业地址",
    trigger: "blur",
  }],
};
//新增
const addDialog = ref(false);
const ruleFormRef = ref()
const add  = (form) => {
  if (!form) return
  ruleFormRef.value.validate(valid=>{
    if (valid) {
      form.creater=localStorage.getItem('number')
      insertEnterpriseFiling(form).then((res)=>{
        if (res.code == 200){
          ElMessage.success("新增成功!")
          addDialog.value = false
          selectAll()
          clearForm()
        }else {
          ElMessage.error("新增失败!")
        }
      })
    } else {
      ElMessage.error("请填写必填项")
    }
  })
}
const clearForm = () => {
  form.enterprise_code =""
  form.enterprise_name =""
  form.enterprise_social_credit_code =""
  form.enterprise_area =""
  form.enterprise_corp=""
  form.enterprise_phone =""
  form.enterprise_site =""
  form.enterprise_linkman =""
}
//修改
const ruleFormRefUpdate = ref()
const updateDialog = ref(false)
let obj = reactive({
  enterprise_id:"",
  enterprise_code:"",
  enterpriseName:"",
  enterprise_social_credit_code:"",
  enterprise_area:"",
  enterprise_linkman:"",
  enterprise_corp:"",
  enterprise_phone:"",
  enterprise_site:""
})
const updateDetail=(row) => {
  updateDialog.value = true
  obj.enterprise_id = row.enterprise_id
  obj.enterprise_code = row.enterprise_code
  obj.enterprise_name = row.enterprise_name
  obj.enterprise_social_credit_code = row.enterprise_social_credit_code
  obj.enterprise_area = row.enterprise_area
  obj.enterprise_linkman = row.enterprise_linkman
  obj.enterprise_corp = row.enterprise_corp
  obj.enterprise_phone = row.enterprise_phone
  obj.enterprise_site = row.enterprise_site
}
const update = (row) => {
  if(!row) return
  ruleFormRefUpdate.value.validate(valid => {
    if(valid){
      updateEnterpriseFiling(row).then((res) => {
        if (res.code == 200) {
          ElMessage.success("修改成功!")
          updateDialog.value = false
          selectAll()
        } else {
          ElMessage.error("修改失败!")
        }
      })
    }else{

    }
  })
}
</script>

<style scoped>
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/*新增按钮样式*/
.add-but {
  background: #dde5fe;
  color: #3780b9;
}
</style>
